<div class="bg-make-header">
  <div class="container make-warp">
    <div class="col-md-6">
      <h2 class="make-header-title">
        <br>
        您身边的技术专家
      </h2>
      <p class="make-header-info">将小程序开发门槛降到最低，让每个人都可以创建自己的小程序一键创建   上传商品即可</p>
      <div class="make-header-btn-warp">
        <a class="btn btn-trans btn-lg" (click)="turnPage()">自己制作</a>
        <a onclick="javascript:document.getElementById('contact').scrollIntoView()" class="btn btn-trans btn-lg">帮我制作</a>
      </div>
    </div>
  </div>
</div>

<div class="bg-white">
  <div class="container make-warp">
    <h2 class="container-title">
      满足各行业电商零售<br>
      可按特定需求定制
    </h2>
    <div class="col-md-6 col-sm-12 make-case-item">
      <h2 class="make-type-title bg-green">女装类电商小程序</h2>
      <p class="make-info">小程序的优势：快，去除内容导购，做高效卖场；轻，体积小，不耗流量；亲，更亲民，用户体验更优。</p>
      <h4 class="what-photo-title c-green">女装精品特卖小程序</h4>
      <div class="make-photo">
        <div class="make-photo-inner">

          <img src="../../../assets/images/make01.png" alt="">
          <div class="overlay-shade-box">
            <div class="overlay-shade"></div>
            <div class="qc-code-warp">
              <img src="../../../assets/images/bosin-qc-code.jpg" alt="">
            </div>
            <p class="make-photo-tips">
              手机扫一扫<br>
              预览手机端效果
            </p>
            <div class="make-photo-btn-warp">
              <button class="btn btn-make-photo bg-green">立即使用</button>
              <button class="btn btn-make-photo bg-green" (click)="modelCase=1">效果预览</button>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="col-md-6 col-sm-12 make-case-item">
      <h2 class="make-type-title bg-orange">美妆类电商小程序</h2>
      <p class="make-info">基于微信生态，社交能力强，善分享；用户就是媒介，为用户提供个性化内容和服务。</p>
      <h4 class="what-photo-title c-orange">丽人美妆小程序</h4>
      <div class="make-photo">
        <div class="make-photo-inner">

          <img src="../../../assets/images/make02.png" alt="">
          <div class="overlay-shade-box">
            <div class="overlay-shade"></div>
            <div class="qc-code-warp">
              <img src="../../../assets/images/bosin-qc-code.jpg" alt="">
            </div>
            <p class="make-photo-tips">
              手机扫一扫<br>
              预览手机端效果
            </p>
            <div class="make-photo-btn-warp">
              <button class="btn btn-make-photo bg-orange">立即使用</button>
              <button class="btn btn-make-photo bg-orange" (click)="modelCase=2">效果预览</button>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

<div class="bg-gray">
  <div class="container make-warp">
    <div class="col-md-6 col-sm-12 make-case-item">
      <h2 class="make-type-title bg-red">童装类电商小程序</h2>
      <p class="make-info">无需下载和安装，支付便捷，即用即走；新时代，新战略，电商行业的新机遇。</p>
      <h4 class="what-photo-title c-red">宝宝乐童装小程序</h4>
      <div class="make-photo">
        <div class="make-photo-inner">

          <img src="../../../assets/images/make03.png" alt="">
          <div class="overlay-shade-box">
            <div class="overlay-shade"></div>
            <div class="qc-code-warp">
              <img src="../../../assets/images/bosin-qc-code.jpg" alt="">
            </div>
            <p class="make-photo-tips">
              手机扫一扫<br>
              预览手机端效果
            </p>
            <div class="make-photo-btn-warp">
              <button class="btn btn-make-photo bg-red">立即使用</button>
              <button class="btn btn-make-photo bg-red" (click)="modelCase=3">效果预览</button>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="col-md-6 col-sm-12 make-case-item">
      <h2 class="make-type-title bg-pink">食品类电商小程序</h2>
      <p class="make-info">小程序的优势：“即买即走”“即要即买”是年轻人的口号，支付快捷，附近搜一搜即可购买。</p>
      <h4 class="what-photo-title c-pink">小食铺子电商小程序</h4>
      <div class="make-photo">
        <div class="make-photo-inner">

          <img src="../../../assets/images/make04.png" alt="">
          <div class="overlay-shade-box">
            <div class="overlay-shade"></div>
            <div class="qc-code-warp">
              <img src="../../../assets/images/bosin-qc-code.jpg" alt="">
            </div>
            <p class="make-photo-tips">
              手机扫一扫<br>
              预览手机端效果
            </p>
            <div class="make-photo-btn-warp">
              <button class="btn btn-make-photo bg-pink">立即使用</button>
              <button class="btn btn-make-photo bg-pink" (click)="modelCase=4">效果预览</button>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

<div class="bg-white">
  <div class="container make-warp">
    <div class="col-md-6 col-sm-12 make-case-item">
      <h2 class="make-type-title bg-blue">女鞋类电商小程序</h2>
      <p class="make-info">小程序的优势：随时获取，触手可得；入口明显，引流快，社交性强。</p>
      <h4 class="what-photo-title c-blue">北苑鞋城小程序</h4>
      <div class="make-photo">
        <div class="make-photo-inner">

          <img src="../../../assets/images/make05.png" alt="">
          <div class="overlay-shade-box">
            <div class="overlay-shade"></div>
            <div class="qc-code-warp">
              <img src="../../../assets/images/bosin-qc-code.jpg" alt="">
            </div>
            <p class="make-photo-tips">
              手机扫一扫<br>
              预览手机端效果
            </p>
            <div class="make-photo-btn-warp">
              <button class="btn btn-make-photo bg-blue">立即使用</button>
              <button class="btn btn-make-photo bg-blue" (click)="modelCase=5">效果预览</button>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="col-md-6 col-sm-12">
      <h2 class="make-type-title bg-yellow make-case-item">箱包类电商小程序</h2>
      <p class="make-info">小程序的优势：与公众号，APP相比，小程序核心优势在于场景应用，有场景的地方就有小程序，解决用户刚需。</p>
      <h4 class="what-photo-title c-yellow">箱包馆小程序</h4>
      <div class="make-photo">
        <div class="make-photo-inner">

          <img src="../../../assets/images/make06.png" alt="">
          <div class="overlay-shade-box">
            <div class="overlay-shade"></div>
            <div class="qc-code-warp">
              <img src="../../../assets/images/bosin-qc-code.jpg" alt="">
            </div>
            <p class="make-photo-tips">
              手机扫一扫<br>
              预览手机端效果
            </p>
            <div class="make-photo-btn-warp">
              <button class="btn btn-make-photo bg-yellow">立即使用</button>
              <button class="btn btn-make-photo bg-yellow" (click)="modelCase=6">效果预览</button>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

<div class="bg-gray" id="contact">
  <div class="container make-warp">
    <h2 class="container-title">
      帮我制作<br>
      <small>留下您的联系方式，专业的产品经理第一时间联系您</small>
    </h2>
    <form #addContactFrom="ngForm" class="container-fluid">
      <div class="col-md-6 form-group">
        <label class="col-md-4 text-right"><span class="c-red">*</span>您的姓名：</label>
        <div class="col-md-8">
          <input type="text" class="form-control" name="fullname" [(ngModel)]="addContact.fullname" required>
        </div>
      </div>
      <div class="col-md-6 form-group">
        <label class="col-md-4 text-right">所在区域：</label>
        <div class="col-md-8 row">
          <div class="col-md-6">
            <select class="form-control" name="province" [(ngModel)]="addContact.province" (change)="changeProvince()">
              <option value="0">省</option>
              <option *ngFor="let item of provinceList" value="{{item.code}}">{{item.name}}</option>
            </select>
          </div>
          <div class="col-md-6">
            <select class="form-control col-md-6" name="city" [(ngModel)]="addContact.city">
              <option value="0">市</option>
              <option *ngFor="let item of cityList" value="{{item.code}}">{{item.name}}</option>
            </select>
          </div>
        </div>
      </div>
      <div class="col-md-6 form-group">
        <label class="col-md-4 text-right"><span class="c-red">*</span>您的电话：</label>
        <div class="col-md-8">
          <input type="text" class="form-control" name="mobile" [(ngModel)]="addContact.mobile" required>
        </div>
      </div>
      <div class="col-md-6 form-group">
        <label class="col-md-4 text-right">您的QQ：</label>
        <div class="col-md-8">
          <input type="text" class="form-control" name="qq" [(ngModel)]="addContact.qq">
        </div>
      </div>
      <div class="text-center form-btn">
        <button type="submit" class="btn btn-success btn-lg" [disabled]="!addContactFrom.form.valid" (click)="contactSubmit()">立刻提交</button>
      </div>
    </form>
  </div>
</div>

<div class="model-warp" *ngIf="modelCase!=null">
  <div class="overlay" (click)="modelCase=null"></div>
  <div class="model">
    <div class="model-phone-warp">
      <div class="model-swiper">
        <img src="../../../assets/images/make-demo01.jpg" alt="" *ngIf="modelCase==1">
        <img src="../../../assets/images/make-demo02.jpg" alt="" *ngIf="modelCase==2">
        <img src="../../../assets/images/make-demo03.jpg" alt="" *ngIf="modelCase==3">
        <img src="../../../assets/images/make-demo04.jpg" alt="" *ngIf="modelCase==4">
        <img src="../../../assets/images/make-demo05.jpg" alt="" *ngIf="modelCase==5">
        <img src="../../../assets/images/make-demo06.jpg" alt="" *ngIf="modelCase==6">
      </div>
    </div>
  </div>
</div>

<app-notification [type]="type" [message]="message" [isShow]="isShow" (promptIsShow)="isShow = $event;"></app-notification>
